<template>
  <a-card title="表单控件"
          style="width: 1080px">
    <el-form :model="formState">
      <el-form-item label="级联选择器">
        <Cascader :fieldNames="{
            label: 'reason',
            value: 'id',
            children: 'childList'
          }"
                  immediate
                  v-model="formState.reasonIds"
                  url="config/spl-review/list-config"
                  @change="change"></Cascader>
      </el-form-item>
      <el-form-item label="下拉框选择器">
        <Select :options="OPTIONS"
                :params="{
            columnName: 'skcList',
            menuName: 'bulkInspectionTaskPageForm'
          }"
                v-model="formState.cloths">
        </Select>
      </el-form-item>
      <el-form-item label="上传图片">
        <UpLoad isHideUpload
                v-model:file-list="formState.fileList"
                :limit="1"
                :fileType="['png']"></UpLoad>
      </el-form-item>
    </el-form>
  </a-card>

  <a-card title="公共表单">
    <CommonForm ref="commonFormRef"
                :formConfig="FORM_CONFIG"
                :formData="formState"
                labelWidth="100px">
    </CommonForm>
    <a-button type="primary"
              @click="onSubmit">提交</a-button>
    <a-button type="primary"
              @click="popFormModel">弹出表单弹窗</a-button>
  </a-card>
</template>

<script setup lang="ts">
import { message } from 'ant-design-vue'
import { FORM_CONFIG } from './static'
const commonForm = ref()
const dlgRef = ref()

import { reactive, ref } from 'vue'
const popFormModel = async () => {
  dlgRef.value.openDig()
  let result = await commonForm.value.onSubmit()
  if (result) {
    console.log('当前表单数据', result)
  }
}

const FormComponentRef = ref()

const formState = reactive({
  name: 'sdf',
  sex: '1'
})

const onSubmit = () => {
  // FormComponentRef.value.onSubmit()
  /* 测试ref */
  FormComponentRef.value
    .validate()
    .then(() => {
      message.success('校验成功!!!')
    })
    .catch(err => {
      console.log('error', err)
    })
}

const commonFormRef = ref()
onMounted(() => {
  console.log(commonFormRef.value.formState)
})
</script>

<style scoped>
.bottom {
  width: 100%;
}
.ant-card {
  margin: 12px;
}

.swiper_Item_container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 214px;
  border-radius: 11px;
  margin-right: 24px;
  padding: 22px;
  box-sizing: border-box;
  background: rgb(0, 0, 0, 0.02);
}
.period_Title {
  height: 20px;
  font-weight: bold;
  font-size: 20px;
  color: rgb(0, 0, 0, 0.7);
}

.describe {
  font-weight: 400;
  font-size: 13px;
  color: rgb(0, 0, 0, 0.7);
}
</style>
